window.onload=function(){
	var mask = document.querySelector(".mask");
	// loding ani
	var mt = setInterval(()=>{
		mask.style.display = "block";
		show();
		clearInterval(mt);
	},1000)


	var loading = document.querySelector('#loading');
	var loadIn = document.querySelector('.load-in');
	var page = document.querySelectorAll(".page");
	var audio_btn = document.querySelector(".audio");
	var page2 = document.querySelector(".page2 #btn_p2");
	var flag = true


	// 音频
	var audioDom = document.createElement("audio");
	audioDom.setAttribute("loop","loop");
	console.log(audioDom);
	audioDom.src = "../H5/media/bg.ogg";
	
	audio_btn.onclick =function(){
		if(flag){
			this.classList.add("ani-route");
			audioDom.play();
		}else{
			this.classList.remove("ani-route");
			audioDom.pause();
		}
		flag  = !flag
		
	}


//	for(var i=0;i<100;i++){
//		loading.innerText=i+"%";
//	}
	var i = 0;
	function show(){
		var t = setInterval(function(){
			if(i<=70){
				loading.innerText= i +"%";
				i++;		
				loadIn.style.width = i + '%';
			}else if(i<=100){
				loading.innerText= i +"%";
				i+=2;
				loadIn.style.width = i + '%';
	
			}
			else{
				loading.innerText="100%";
				loadIn.style.width = i + '%';
				audio_btn.style.display = "block"
				mask.style.display = "none";
				chuxian(page[1])
				clearInterval(t)


			
			}
		},100);
	}

	
	
	function chuxian(obj){
		console.log("obj",obj);
		for(var j=0;j<page.length;j++){
			page[j].classList.remove("ani");
			page[j].style.display="none";
			page[j].style.opacity=0;
		}

		obj.style.display="block";
		obj.classList.add("ani");
	}

	var photoArr = document.querySelectorAll(".page2 .photo");

	document.querySelector(".btn_p1").onclick=function(){
		chuxian(page[2]);
		// photo
		
		timer_p = setTimeout(()=>{
			photoArr.forEach((item,index) => {			
				item.className = "on"
				clearTimeout(timer_p);
			})

		},100)
		
		
	}

	document.querySelector("#btn_p2").onclick =function(){
		
		chuxian(page[3]);
		photoArr.forEach(item =>{
			item.className = ""
		})
	}


	document.querySelector("#btn_p3").onclick =function(){
		chuxian(page[1]);
	}


	// page[1].onclick=function(){
	// 	chuxian(page[2])
	// }
}


3